<!DOCTYPE html>
<html lang="zh">
<head>
	
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>分页</title>
	<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>

	<!--content-->
		<div class="page-1">
			<h1>第一页</h1>
			<img src="image/4.jpeg" width="900" height="500"/>
</div>

<div class="page-2">
	<h1>第二页</h1>
	<img src="image/2.jpeg" width="900" height="500"/>
	</div>
</div>
		
	<div class="page-3">
		<h1>第三页</h1>
		<img src="image/3.jpeg" width="900" height="500"/>

			</div>
	</div>

	<!-- 分页按钮 -->
	<div class="page-icon">
		<button class="firstPage" onclick="first_click()" ><img src="image/left-end.png"/></button>
		<button class="beforePage" onclick="prev_click()" ><img src="image/page-left.png"/></button>
		<button>第<input id="currentPage" onchange="choose_page()" type="text" value="1"/>页</button>
		<button>/&nbsp;&nbsp;&nbsp;共<input id="totalPage" type="button" value="3" readonly="readonly">页</button>
		<button class="nextPage" onclick="next_click()"><img src="image/page-right.png"/></button>
		<button class="lastPage" onclick="last_click()"><img src="image/right-end.png"/></button>			
	</div>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>


























	

	